<template>
  <div class="liveTimetablestyle">
    <!-- 标题 -->
    <h2>{{ datas.text }}</h2>
    <el-form label-width="80px" :model="datas" size="small">
      <!-- 年级选择 -->
      <el-form-item class="lef" label="年级选择">
        <el-cascader
          :options="gradelist"
          v-model="datas.activeGrade"
          :props="{ multiple: true }"
          @change="chooseGrade"
          clearable
        ></el-cascader>
      </el-form-item>
      <!-- <el-form-item class="lef" label="时间选择">
            <el-date-picker
                v-model="dateValue"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 280px;"
                @change="chooseLiveDate">
            </el-date-picker>
        </el-form-item> -->
      <el-form-item class="lef" label="课表上传">
        <div
          class="themeImg"
          @click="uploadI(index)"
          v-for="(item, index) in datas.picList"
          :key="index"
        >
          <img
            v-if="!item.imgUrl"
            draggable="false"
            src="../../../assets/images/imgs.png"
            alt=""
          />
          <div class="imglist" v-else>
            <img draggable="false" :src="item.imgUrl" ref="fileImg" alt="" />
            <i class="el-icon-circle-close" @click.stop="deleteimg(index)" />
          </div>
          <p>点击上传</p>
        </div>
        <el-button type="primary" @click="addPiclist"
          >上传课表图<i class="el-icon-upload el-icon--right"></i
        ></el-button>
      </el-form-item>
    </el-form>
    <!-- 上传图片 -->
    <uploadimg ref="upload" @uploadInformation="uploadInformation" />
  </div>
</template>
<script>
import uploadimg from "../../uploadImg"; // 图片上传
import { timeFormat } from "../../../utils/filter";
export default {
  name: "LiveTimetablestyle",
  components: {
    uploadimg,
  },
  props: {
    datas: Object,
  },
  data() {
    return {
      props: { multiple: true },
      gradelist: [
        {
          value: "0001",
          label: "小学",
          children: [
            {
              value: "0001",
              label: "一年级",
            },
            {
              value: "0002",
              label: "二年级",
            },
            {
              value: "0003",
              label: "三年级",
            },
            {
              value: "0004",
              label: "四年级",
            },
            {
              value: "0005",
              label: "五年级",
            },
            {
              value: "0006",
              label: "六年级",
            },
          ],
        },
        {
          value: "0002",
          label: "初中",
          children: [
            {
              value: "0007",
              label: "七年级",
            },
            {
              value: "0008",
              label: "八年级",
            },
            {
              value: "0009",
              label: "九年级",
            },
          ],
        },
        {
          value: "0003",
          label: "高中",
          children: [
            {
              value: "0011",
              label: "高中",
            },
          ],
        },
      ],
      dateValue: "",
      dateArrList: [],
      dateObjArr: [],
      currentIndex: "",
    };
  },
  methods: {
    chooseGrade() {
      const valObj = this.datas.activeGrade.map((item) => ({
        stageCode: item[0],
        gradeCode: item[1],
      }));
      this.datas.classList = valObj;
    },
    chooseLiveDate(val) {
      let dateArr = Object.values(val);
      dateArr.forEach((item) => {
        this.dateArrList.push(timeFormat(item, "yyyy-mm-dd"));
      });
      let dateObj = {};
      dateObj["startTime"] = Date.parse(this.dateArrList[0]) / 1000;
      dateObj["endTime"] = Date.parse(this.dateArrList[1]) / 1000;
      this.dateObjArr.push(dateObj);
      this.datas.timeList = Array.from(
        new Set(this.dateObjArr.map(JSON.stringify)),
        JSON.parse
      );
    },
    addPiclist() {
      this.datas.picList.push({
        imgUrl: "",
        width: 0,
        height: 0,
      });
    },
    uploadI(index) {
      this.currentIndex = index;
      this.$refs.upload.showUpload();
    },
    uploadInformation(res) {
      const _this = this;
      this.datas.picList[this.currentIndex].imgUrl = res;
      let img = new Image();
      img.src = this.datas.picList[this.currentIndex].imgUrl;
      let imgWidth = "",
        imgHeight = "";
      img.onload = function () {
        imgWidth = img.width;
        imgHeight = img.height;
        _this.datas.picList[_this.currentIndex].width = imgWidth;
        _this.datas.picList[_this.currentIndex].height = imgHeight;
      };
    },
    deleteimg(index) {
      this.datas.picList.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.liveTimetablestyle {
  width: 100%;
  padding: 0 10px 20px;
  box-sizing: border-box;
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }
  /* 背景图 */
  .themeImg {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    width: 100px;
    // height: 100px;
    position: relative;
    background: #f2f4f6;
    margin-bottom: 30px;
    margin-right: 10px;
    img {
      width: 100%;
      height: auto;
    }
    p {
      position: absolute;
      left: 0;
      bottom: -10px;
      width: 100%;
      height: 20px;
      font-size: 12px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      text-align: center;
      line-height: 20px;
    }
  }
  .imglist {
    position: relative;
    /* 删除图标 */
    .el-icon-circle-close {
      position: absolute;
      right: -10px;
      top: -10px;
      cursor: pointer;
      font-size: 19px;
    }
  }
  .lef {
    .el-form-item__label {
      text-align: left;
    }
  }
}
</style>
